<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>动态生成并下载图片</title>
	</head>
	<body>
		<button id="downloadBtn">下载图片</button>

		<script>
			document.getElementById('downloadBtn').addEventListener('click', () => {
				// 动态创建 Canvas
				const canvas = document.createElement('canvas')
				canvas.width = 1024
				canvas.height = 642

				const ctx = canvas.getContext('2d')

				// 加载背景图片
				const background = new Image()
				background.src = 'photo_2024-12-05_15-11-23.jpg' // 替换为实际背景图片路径

				background.onload = () => {
					// 绘制背景图片
					ctx.drawImage(background, 0, 0, canvas.width, canvas.height)

					// 动态文字列表
					const textList = [
						{
							text: '欢迎使用闪连VPN！',
							color: '#FFD700',
							font: 'bold 32px Arial',
							x: canvas.width / 2,
							y: 100,
							align: 'center',
						},
						{
							text: '您的数字账户为：',
							color: '#FFFFFF',
							font: 'bold 28px Arial',
							x: canvas.width / 2 - 50,
							y: 300,
							align: 'left',
						},
						{
							text: '36642912',
							color: '#FF4500',
							font: 'bold 36px Arial',
							x: canvas.width / 2 + 50,
							y: 300,
							align: 'left',
						},
						{
							text: '如果遇到问题，请联系客服！',
							color: '#FFFFFF',
							font: 'italic 20px Arial',
							x: canvas.width / 2,
							y: 500,
							align: 'center',
						},
					]

					// 绘制文字
					textList.forEach((item) => {
						ctx.font = item.font // 设置字体样式
						ctx.fillStyle = item.color // 设置文字颜色
						ctx.textAlign = item.align // 设置对齐方式
						ctx.fillText(item.text, item.x, item.y) // 绘制文字
					})

					// 使用 Blob 下载图片
					canvas.toBlob((blob) => {
						const link = document.createElement('a')
						link.download = '合成图片.png'
						link.href = URL.createObjectURL(blob)
						link.click()
						URL.revokeObjectURL(link.href) // 释放内存
					}, 'image/png')
				}
			})
		</script>

		<script>
			// 下载合成图片
			function handleSaveImg() {
				// 动态创建 Canvas
				const canvas = document.createElement('canvas')

				canvas.width = zh_img_bg.width
				canvas.height = zh_img_bg.height

				const ctx = canvas.getContext('2d')

				// 加载背景图片
				const background = new Image()
				background.src = this.currentLang === 'cn' ? zh_img_bg.src : en_img_bg.src

				background.onload = () => {
					// 绘制背景图片
					ctx.drawImage(background, 0, 0, canvas.width, canvas.height)

					// 动态文字列表
					const textList = [
						{
							text: `${this.RegisterI18Data.saveImgTitle}:`,
							color: '#262626',
							font: 'bold 26px MiSans',
							x: 61,
							y: 187,
							align: 'left',
							maxWidth: 570, // 设置最大宽度
						},
						{
							text: `${this.account}`,
							color: '#FFFFFF',
							font: 'bold 50px MiSans',
							x: 110,
							y: 335,
							align: 'left',
							maxWidth: 570, // 设置最大宽度
						},
						{
							text: `${this.RegisterI18Data.saveImgSupText1}`,
							color: '#FF8E15',
							font: 'bold 26px MiSans',
							x: 61,
							y: 490,
							align: 'left',
							maxWidth: 700, // 设置最大宽度
						},
						{
							text: `${this.RegisterI18Data.saveImgSupText2}`,
							color: '#7C7C7C',
							font: 'bold 18px MiSans',
							x: 61,
							y: 528,
							align: 'left',
							maxWidth: 570, // 设置最大宽度
						},
					]

					// 绘制文字
					textList.forEach((item) => {
						ctx.font = item.font // 设置字体样式
						ctx.fillStyle = item.color // 设置文字颜色
						ctx.textAlign = item.align // 设置对齐方式
						drawText(ctx, item.text, item.x, item.y, item.maxWidth)
					})

					// 自动换行绘制文字的函数
					function drawText(ctx, text, x, y, maxWidth) {
						const words = text.split('')
						let line = ''
						const lineHeight = 30 // 设置行高

						for (let n = 0; n < words.length; n++) {
							const testLine = line + words[n]
							const metrics = ctx.measureText(testLine)
							const testWidth = metrics.width
							if (testWidth > maxWidth) {
								ctx.fillText(line, x, y)
								line = ''
								y += lineHeight
							}
							line += words[n]
						}
						ctx.fillText(line, x, y)
					}

					// 使用 Blob 下载图片
					canvas.toBlob((blob) => {
						const link = document.createElement('a')
						link.download = '闪连VPN账号.png'
						link.href = URL.createObjectURL(blob)
						link.click()
						URL.revokeObjectURL(link.href) // 释放内存
					}, 'image/png')
				}
			}
		</script>
	</body>
</html>
